import React from 'react'
import axios from 'axios'
import { useState, useEffect, } from 'react'
import { useSelector, } from 'react-redux';
import { Modal, Button, Form, Input, Radio, message, Descriptions } from 'antd';
import type { FormInstance } from 'antd/es/form';
const templateValue = {
  mail: "undefined@undefined.com",
  name: "undefined",
  sex: "male",
  phone: "15274983684",
  address: "宁夏回族自治区固原市原州区固原六盘山机场(国内到达)附近"
}
const resetVaule = {
  mail: undefined,
  name: undefined,
  sex: "male",
  phone: undefined,
  address: undefined
}
export default function PersonalData() {
  const [openUser, setOpenUser] = useState(false);
  const [dataUser, setDataUser] = useState<any>({});
  const [initialValuesUser, setInitialValuesUser] = useState({});
  const account = useSelector((state: any) => state.account);
  const code = useSelector((state: any) => state.code);
  const formRef = React.useRef<FormInstance>(null);
  const [messageApi, contextHolder] = message.useMessage();
  useEffect(() => {
    // 在组件挂载完成后调用 query 方法
    query();
  }, []);

  useEffect(() => {
    // 监听 info 的变化，当 info 变化时，强制组件重新渲染
    setDataUser(() => dataUser);
  }, [dataUser]);

  const query = () => {
    // let tempdata: any
    let params = {
      account: account
    }
    axios.post("http://localhost:8080/api/userInfo", params).then((response) => {
      if (response.data.result) {
        setDataUser(response.data.result[0]);
      }
    });
  }
  const showModalUser = () => {
    setOpenUser(true);
    onFillUser(2, dataUser)
  };
  const onCancelUser = () => {
    setOpenUser(false);
  };
  const onFinishUser = (values: any) => {
    let params = {
      account: account,
      code: code,
      mail: values.mail,
      name: values.name,
      sex: values.sex,
      phone: values.phone,
      address: values.address
    }
    axios.post("http://localhost:8080/api/updateUser", params).then((response: any) => {
      if (response.code === 200) {
        messageApi.open({
          type: 'success',
          content: '个人信息更新成功！',
        });
      }
    }).catch((err) => {
      messageApi.open({
        type: 'error',
        content: err.message,
      });
    });
    onFillUser(0, resetVaule)
    query()
    setOpenUser(false);
  };
  const onFillUser = (num: number,data:any) => {
    let defaultValue = {
      mail: data.mail,
      name: data.name,
      sex: data.sex,
      phone: data.phone,
      address: data.adress
    }
    let fillData = {}
    // 0新建，1默认传值，2一键填充
    switch (num) {
      case 0: fillData = resetVaule; break;
      case 1: fillData = templateValue; break;
      case 2: fillData = defaultValue; break;
      default:
        break;
    } 
    formRef.current?.setFieldsValue(fillData);
  };

  return (
    <div className='person_data'>
      {
        dataUser ?
          <div className="person_content">
            <div className="person_header">
              <span>您的基础信息</span>
              <Button className='person_header_button' onClick={showModalUser}>修改个人信息</Button>
            </div>
            <Modal
              title="修改个人信息"
              open={openUser}
              onCancel={onCancelUser}
              footer={[
                <Button key="cancel" onClick={onCancelUser}>
                  取消
                </Button>,
                <Button key="submit" form="myForm" htmlType="submit">
                  提交
                </Button>,
              ]}
            >
              <Form
                id="myForm"
                onFinish={onFinishUser}
                initialValues={initialValuesUser}
                ref={formRef}
              >
                <Form.Item label="邮箱" name="mail">
                  <Input />
                </Form.Item>
                <Form.Item label="昵称" name="name">
                  <Input />
                </Form.Item>
                <Form.Item label="性别" name="sex">
                  <Radio.Group>
                    <Radio value="male"> 男 </Radio>
                    <Radio value="female"> 女 </Radio>
                    <Radio value="secret"> 保密 </Radio>
                  </Radio.Group>
                </Form.Item>
                <Form.Item label="联系方式" name="phone">
                  <Input />
                </Form.Item>
                <Form.Item label="地址" name="address">
                  <Input />
                </Form.Item>
                <Button type="link" htmlType="button" onClick={() => onFillUser(1, templateValue)}>
                  一键填充
                </Button>
              </Form>
            </Modal>
            <Descriptions
              title=""
              bordered
              column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
            >
              <Descriptions.Item span={2} label="账户">{dataUser.account}</Descriptions.Item>
              <Descriptions.Item span={2} label="邮箱">{dataUser.mail}</Descriptions.Item>
              <Descriptions.Item span={2} label="昵称">{dataUser.name}</Descriptions.Item>
              <Descriptions.Item span={2} label="性别">{dataUser.sex}</Descriptions.Item>
              <Descriptions.Item span={2} label="联系方式">{dataUser.phone}</Descriptions.Item>
              <Descriptions.Item span={2} label="地址">{dataUser.address}</Descriptions.Item>
            </Descriptions>
          </div> : ""
      }
    </div>
  )
}
